<template>
  <div class="article-container">
    <!-- 导航栏 -->
    <!-- @click-right="onClickRight" -->
    <van-nav-bar left-arrow title="文章详情" @click-left="$router.back()" />
    <!-- /导航栏 -->

    <!-- 文章 -->
    <div class="content-container" ref="content-container">
      <!-- 标题 -->
      <h1 class="title">{{ article.title }}</h1>
      <!-- /标题 -->

      <!-- 作者 -->
      <van-cell>
        <template #icon>
          <van-image round :src="article.aut_photo" />
        </template>

        <template #title>
          <span class="custom-title">{{ article.aut_name }}</span>
          <span class="label">{{ article.pubdate | relativeTime }}</span>
        </template>

        <van-button
          :loading="followLoading"
          :icon="article.is_followed ? '' : 'plus'"
          :type="article.is_followed ? 'default' : 'info'"
          round
          @click="onFollow"
          >{{ article.is_followed ? "已" : "" }}关注</van-button
        >
      </van-cell>
      <!-- /作者 -->

      <!-- 内容 -->
      <div
        ref="article-content"
        class="markdown-body"
        v-html="article.content"
      ></div>
      <!-- /内容 -->

      <!-- 评论列表 -->
      <CommentList :source="articleId" ref="comment-list" />
      <!-- /评论列表 -->
    </div>
    <!-- /文章 -->

    <!-- 底部评论、转发 -->
    <div class="article-bottom">
      <van-button round type="default" @click="showPost = true"
        >写评论</van-button
      >

      <div class="icons">
        <van-icon
          :color="article.attitude === 1 ? 'hotpink' : ''"
          :name="article.attitude === 1 ? 'good-job' : 'good-job-o'"
          @click="onLike"
        />
        <van-icon
          @click="viewComment"
          name="comment-o"
          :badge="article.comm_count"
        />
        <van-icon
          :color="article.is_collected ? '#cccc00' : ''"
          :name="article.is_collected ? 'star' : 'star-o'"
          @click="onCollect"
        />
        <van-icon name="share-o" />
      </div>
    </div>
    <!-- /底部评论、转发 -->

    <!-- 发布评论的弹出层 -->
    <van-popup v-model="showPost" position="bottom">
      <PostComment :target="articleId" />
    </van-popup>
    <!-- /发布评论的弹出层 -->

    <!-- 回复评论的弹出层 -->
    <van-popup
      class="comment-reply-pop-up"
      v-model="showReply"
      position="bottom"
    >
      <CommentReply
        @close="showReply = false"
        v-if="showReply"
        :comment="comment"
        :articleId="articleId"
      />
    </van-popup>
    <!-- /回复评论的弹出层 -->
  </div>
</template>

<script>
import { getArticleById } from "@/api/article";
import { addFollow, deleteFollow } from "@/api/user";
import { addCollect, deleteCollect, addLike, deleteLike } from "@/api/article";
import "./github-markdown.css";
import { ImagePreview } from "vant";
import CommentList from "./components/comment-list";
import PostComment from "./components/post-comment";
import CommentReply from "./components/comment-reply";

export default {
  name: "Article",
  components: { CommentList, PostComment, CommentReply },
  props: ["articleId"],
  data() {
    return {
      article: {}, // 文章数据对象
      followLoading: false, // 控制关注按钮的加载状态
      showPost: false, // 控制发布评论弹出层
      showReply: false, // 控制回复评论弹出层
      comment: {}, // 传给 评论回复 组件的对象
    };
  },
  methods: {
    // 请求文章详情
    async loadArticle() {
      const { data } = await getArticleById(this.articleId);
      this.article = data.data;

      this.$nextTick(() => {
        this.handlePreviewImage();
      });
    },
    // 处理图片预览
    handlePreviewImage() {
      const articleContent = this.$refs["article-content"];
      const imgs = [...articleContent.querySelectorAll("img")];

      const images = [];

      imgs.forEach((img, index) => {
        images.push(img.src);

        img.addEventListener("click", () => {
          ImagePreview({
            images,
            startPosition: index,
          });
        });
      });
    },
    // 点击关注按钮
    async onFollow() {
      this.followLoading = true;
      const { article } = this;
      if (article.is_followed) {
        await deleteFollow(article.aut_id);
      } else {
        await addFollow(article.aut_id);
      }
      article.is_followed = !article.is_followed;
      this.followLoading = false;
    },
    // 点击收藏
    async onCollect() {
      this.$toast.loading({
        message: "操作中...",
        forbidClick: true,
      });

      const { article, articleId } = this;
      if (article.is_followed) {
        await deleteCollect(articleId);
      } else {
        await addCollect(articleId);
      }
      article.is_collected = !article.is_collected;
      this.$toast.success(`${article.is_collected ? "" : "取消"}收藏成功`);
    },
    // 点赞
    async onLike() {
      this.$toast.loading({
        message: "操作中...",
        forbidClick: true,
      });

      const { article, articleId } = this;
      if (article.attitude === 1) {
        await deleteLike(articleId);
        article.attitude = -1;
      } else {
        await addLike(articleId);
        article.attitude = 1;
      }
      this.$toast.success(`${article.attitude === 1 ? "" : "取消"}点赞成功`);
    },
    // 点击评论图标，滑到底部评论区
    viewComment() {
      this.$refs["content-container"].scrollTop =
        this.$refs["content-container"].scrollHeight -
        this.$refs["comment-list"].$el.clientHeight;
    },
  },
  created() {
    this.loadArticle();
  },
  mounted() {
    // 点击回复按钮事件
    this.$bus.$on("reply-click", (comment) => {
      this.showReply = true;
      this.comment = comment;
    });

    // 发布评论成功事件
    this.$bus.$on("post-success", () => {
      this.showPost = false;
      this.article.comm_count++;
    });

    // 回复评论成功事件
    this.$bus.$on("reply-success", (comment) => {
      this.article.comm_count++;
      comment.reply_count++;
    });
  },
};
</script>

<style scoped lang="less">
.content-container {
  position: fixed;
  top: 64px;
  left: 0;
  right: 0;
  bottom: 43px;
  overflow-y: auto;
  padding-left: 14px;
  padding-right: 18px;

  .title {
    margin: 16px 0;
    font-size: 20px;
    line-height: 33px;
  }

  .van-cell {
    box-sizing: content-box;
    height: 36px;
    padding: 5px 0;

    .van-image {
      width: 36px;
      height: 36px;
      margin-right: 8px;
    }

    .van-cell__title {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 28px;
      padding: 4px 0;

      .custom-title {
        font-size: 12px;
        line-height: 12px;
        color: #333;
      }

      .label {
        font-size: 10px;
        line-height: 10px;
        color: #b4b4b4;
      }
    }

    .van-button {
      width: 85px;
      height: 30px;
      padding: 0;

      .van-button__icon {
        font-size: 14px;
        font-weight: 600;
      }
    }

    .van-button--default {
      border: 1px solid;
    }
  }
}

.article-bottom {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  bottom: 0;
  height: 42px;
  width: 100%;
  border-top: 1px solid #d8d8d8;
  padding: 0 18px 0 14px;

  .van-button {
    height: 22px;
    width: 140px;

    .van-button__content {
      justify-content: unset;

      .van-button__text {
        font-size: 15px;
        color: #d8d8d8;
      }
    }
  }

  .icons {
    display: flex;
    justify-content: space-between;
    width: 163px;

    .van-icon {
      font-size: 20px;
    }
  }
}

.comment-reply-pop-up {
  height: 97%;
}
</style>
